import React, { Component } from 'react';
import css from './index.less';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import { Button, Divider } from 'antd';
import { connect } from 'dva';
import EditModal from '@/components/EditModal';
import { Link } from 'react-router-dom';
class roleManage extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  table = { fetch: () => {} };
  modal = { show: () => {} };
  modalShow = () => {};
  save = () => {
    this.setState({
      showEdit: false,
    });
    this.table.fetch();
  };
  /**
   * 除岗位
   * @param data
   */
  deleteRole(data) {
    this.props
      .dispatch({
        type: 'base/delete',
        payload: {
          url: '/api/privilege/v1/deleteRole',
          type: '角色',
          data,
        },
      })
      .then(res => {
        this.table.fetch();
      });
  }
  filters = [
    {
      key: 'name',
      type: 'input',
      label: '角色名称',
      placeholder: '请输入角色名称',
    },
  ];
  editFilters = [
    {
      key: 'name',
      type: 'input',
      label: '角色名称',
      rules: [
        {
          required: true,
        },
      ],
      placeholder: '请输入角色名称',
    },
    {
      key: 'sort',
      type: 'inputnumber',
      label: '排序',
    },
  ];
  columns = [
    { title: '业主单位', dataIndex: 'name', width: 200 },
    {
      title: '权限说明',
      dataIndex: 'privilegeVOList',
      render: (text, data) =>
        data.privilegeVOList.map(item => item.name).join('；'),
    },
    { title: '排序', dataIndex: 'sort', width: 80 },
    {
      title: '操作',
      width: 225,
      render: (text, data) => (
        <span key={text}>
          <Link
            to={{
              pathname: `roleManage/edit`,
              state: { id: data.uuid, name: data.name },
            }}
          >
            <Button className="e-button" type="primary">
              编辑
            </Button>
          </Link>
          <Divider type="vertical" />
          <Button onClick={() => this.deleteRole(data)}>删除</Button>
        </span>
      ),
    },
  ];
  render() {
    return (
      <div>
        <FilterSearch
          filters={this.filters}
          onSearch={val => this.table.fetch(val)}
        >
          <Link
            to={{
              pathname: 'roleManage/edit',
            }}
          >
            <Button type="primary">添加</Button>
          </Link>
        </FilterSearch>
        <TableList
          post
          rowKey="id"
          onRef={c => {
            this.table = c;
          }}
          columns={this.columns}
          source="/api/privilege/v1/queryRole"
        />
        <EditModal
          title="角色编辑"
          filters={this.editFilters}
          onShow={v => (this.modalShow = v)}
          onSave={() => this.table.fetch()}
          createUrl="/api/privilege/v1/createRole"
          updateUrl="/api/privilege/v1/updateRole"
        />
      </div>
    );
  }
}

export default connect(state => state.base)(roleManage);
